<template>
  <el-card shadow="always">
    <el-form :inline="true" :model="requestData" size="mini" label-width="60px">
      <el-form-item label="关键词">
        <el-input v-model="requestData.keyword" placeholder="图表名称"></el-input>
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="requestData.type">
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchData">查询</el-button>
        <el-button @click="requestData.keyword = ''">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card shadow="always">
    <el-table :data="workBookData" size="mini" v-loading="loading" height="280">
      <el-table-column property="id" label="编号" width="180"></el-table-column>
      <el-table-column property="name" label="名称" width="180"></el-table-column>
      <el-table-column property="chartMode" label="类型" width="80"></el-table-column>
      <el-table-column label="修改时间" width="180">
        <template #default="scope">{{ $dateFormat(scope.row.lastUpdateTime) }}</template>
      </el-table-column>
      <el-table-column label="操作" width="240">
        <template #default="scope">
          <slot :data="scope.row" name="operation">
            <el-button size="mini" type="primary"  @click="edit(scope.row)">编辑
            </el-button>
            <el-button size="mini" type="warning"  @click="show(scope.row)">预览
            </el-button>
            <el-button size="mini" type="danger"  @click="del(scope.row)">删除
            </el-button>
          </slot>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      small
      :current-page="requestData.pageNum"
      :page-size.sync="requestData.pageSize"
      @current-change="handleCurrentChange"
      :total="requestData.total"
      layout="prev, pager, next ,total"
    >
    </el-pagination>
  </el-card>
</template>

<script>
import {getList, delWorkBook} from '@/api/workBook'
import PubSub from "pubsub-js";
import {store} from "@/layout/common/store";

export default {
  name: "workBookList",
  data() {
    return {
      dialog:store,
      requestData: {
        keyword: '',
        type: '',
        pageNum: 1,
        pageSize: 5,
        total: 0
      },
      loading: false,
      workBookData: []
    }
  },
  computed: {
    routeName() {
      return this.$route.name
    }
  },
  methods: {
    fetchData() {
      this.loading = true
      getList(this.requestData).then(resp => {
        this.workBookData = resp.data.records
        this.requestData.total = Number(resp.data.total)
        this.loading = false
      }).catch(err => {
        this.loading = false
      })
    },
    handleCurrentChange(index) {
      this.requestData.pageNum = index
      this.fetchData()
    },
    edit(obj) {
      this.$router.push({name: 'workBookEdit', query: {id: obj.id}})
      this.dialog.workBookDialogVisible = false
    },
    show(obj) {
      const path = this.$router.resolve({name: 'workBookView', query: {id: obj.id}})
      window.open(path.href, '_blank')
    },
    del(obj) {
      this.$confirm('确认删除图表?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delWorkBook(obj.id).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.fetchData()
          }
        )
      })
    },
    choose(obj) {
      PubSub.publish('addDashboardContent', obj)
    }
  },
  mounted() {
    this.fetchData()
  }
}
</script>

<style scoped>

</style>
